<!--
 * @Description:
 * @Date: 2023-12-20 14:19:12
 * @LastEditTime: 2025-08-08 15:01:10
-->
<template>
  <div id="gridThree" style="width: 100%;height: 100%;" ref="gridThree" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/shine"); // echarts theme
import resize from "../mixins/resize";

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      required: false,
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {

          this.initChart(val);
        });
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(data) {

      if (!this.chart) {
        this.chart = echarts.init(this.$refs.gridThree, "macarons");
      }

      // var seriesData = data.map(item => {
      //   return {
      //     name: item.name,
      //     value: item.count
      //   }
      // })
      // console.log(seriesData)
      // var legendData = data.map(item => item.name);
      this.chart &&
        this.chart.setOption(
          {
            backgroundColor: "#010d3a",
            grid: {
              left: 0,
              right: 0,
              bottom: 0,
              top: 30,
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontSize: 18 // 设置字体大小为14px
              }
            },
            xAxis: [
              {
                type: "category",
                data: data.map(res => res.name),
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false,
                  length: 9,
                  alignWithLabel: true,
                  lineStyle: {
                    color: "#7DFFFD",
                  },
                },
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: "#00F6FF",
                    fontSize: 14,
                    fontWeight: 'bold'
                  },
                  formatter: function (value) {
                    value = value.slice(0, 5)
                    var ret = "";//拼接加\n返回的类目项
                    var maxLength = 2;//每项显示文字个数
                    var valLength = value.length;//X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1)//如果类目项的文字大于3,
                    {
                      for (var i = 0; i < rowN; i++) {
                        var temp = "";//每次截取的字符串
                        var start = i * maxLength;//开始截取的位置
                        var end = start + maxLength;//结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串
                      }
                      return ret;
                    }
                    else {
                      return value;
                    }
                  }
                }
              },
            ],
            yAxis: [
              {
                splitLine: {
                  show: false
                }
              },
            ],
            series: [
              {
                type: "bar",
                data: data.map(res => res.target),
                barWidth: "20px",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#41E1D4", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#10A7DB", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                    barBorderRadius: [30, 30, 0, 0],
                    shadowColor: "rgba(0,255,225,1)",
                    shadowBlur: 4,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    fontSize: 16,
                    color: "#fff",
                    borderRadius: 200,
                    position: ["5", "-20"],
                    distance: 1,
                  },
                },
              },
            ],
          }
        );
    },
  },
};
</script>
<style lang="scss" scoped>
.pie2 {
  width: 100%;
  height: 100%;
}
</style>
